import React,{useState} from 'react'

interface Props{
    userName:string;
    onNameUpdated:(newName:string)=>void;
}

const NameEditComponent:React.FC<Props>=(props)=>{
    const [editingName,setEditingName]=useState(props.userName)
    const onChange=
        (e:React.ChangeEvent<HTMLInputElement>)=>{
            // onNaneUpdated
            setEditingName(e.target.value)
        }
    const onNameSubmit=()=>{
        props.onNameUpdated(editingName)
    }
    return(
        <>
            {/* vscode 用ts写出来的 */}
            {props.userName}
            <input type="text" value={editingName} 
            onChange={onChange}/>
            <button onClick={onNameSubmit}>change</button>
        </>
    )
}

export default NameEditComponent